<template>
  <div>
    <!--  公告栏 -->
    <div class="announcement background-opacity">
      <i class="fa fa-volume-up" aria-hidden="true"></i>
      <div>
        <div
          class="notice"
          v-for="(notice, index) in notices"
          :key="index"
          @click="$router.push({path: '/notice', query: { id: notice.id }})">
          {{ notice.title }}
        </div>
      </div>
    </div>
    <!--  主页分类文章  -->
    <div>
      <div v-for="(sort, index) in sortInfo" :key="index">
        <div v-if="!$common.isEmpty(homeArticles[sort.sortId])">
          <div class="sort-article-first">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenlei"/>
              </svg>
              {{ sort.sortName }}
            </div>
            <div class="article-more"
                 @click="$router.push({path: '/articlePage', query: { sortId: sort.sortId }})">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo"/>
              </svg>
              更多
            </div>
          </div>

          <!--  热门文章  -->
          <div v-if="!$common.isEmpty(homeArticles[sort.sortId])" class="recent-post-container">
            <div class="recent-post-item shadow-box background-opacity wow"
                 v-for="(article, index) in homeArticles[sort.sortId]"
                 :key="index"
                 @click="clickArticle(article)">
              <!-- 封面 -->
              <div class="recent-post-item-image">
                <el-image class="my-el-image"
                          v-once
                          lazy
                          :src="article.articleCover"
                          fit="cover">
                  <div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
                    <div class="error-text">
                      <div>遇事不决，可问春风</div>
                    </div>
                  </div>
                </el-image>
              </div>
              <!-- 内容 -->
              <div class="recent-post-item-post">

                <!-- 时间 -->
                <div class="post-meta">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-rili"/>
                  </svg>
                  发布于 {{ article.createTime }}
                </div>

                <!-- 标题 -->
                <el-tooltip placement="top" effect="light">
                  <div slot="content">{{ article.articleTitle }}</div>
                  <h3>{{ article.articleTitle }}</h3>
                </el-tooltip>

                <!-- 信息 -->
                <div class="post-meta" style="margin-bottom: 10px">
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-redu"/>
                    </svg>
                    {{ article.viewCount }} 热度
                  </span>

                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-yidianzan"/>
                    </svg>
                    {{ article.likeCount }} 点赞
                  </span>

                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-pinglun"/>
                    </svg>
                    {{ article.commentCount }} 条评论
                  </span>

                  <span v-if="article.encoderStatus">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-mima"/>
                    </svg>
                    已加密
                  </span>

                  <span v-if="!article.encoderStatus">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-jiesuo"/>
                    </svg>
                    未加密
                  </span>
                </div>

                <!-- 内容 -->
                <div class="recent-post-desc">
                  {{ article.articleContent }}
                </div>
                <!-- 标签 -->
                <div class="sort-label">
                  <span
                    @click.stop="$router.push({path: '/articlePage', query: {sortId: article.sortId, labelId: article.labelId}})">
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-biaoqian1"/>
                  </svg>
                  {{ article.labelName }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-dialog title="密码"
                 :modal="false"
                 :visible.sync="showPasswordDialog"
                 width="25%"
                 :append-to-body="true"
                 destroy-on-close
                 center>
        <div>
          <div>
            <div class="password-content"> 请输入密码</div>
          </div>
          <div style="margin: 20px auto">
            <el-input maxlength="30" v-model="password"></el-input>
          </div>
          <div style="display: flex;justify-content: center">
            <proButton :info="'提交'"
                       @click.native="submitPassword()"
                       :before="$constant.before_color_2"
                       :after="$constant.after_color_2">
            </proButton>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    notices: {
      type: Array
    },
    sortInfo: {
      type: Array
    },
    homeArticles: {
      type: Object
    }
  },
  data() {
    return {
      showPasswordDialog: false,
      id: null,
      password: null,
    }
  },
  methods: {
    clickArticle(article) {
      if (article.encoderStatus) {
        this.showPasswordDialog = true;
        this.id = article.id;
      } else {
        this.$router.push({path: '/article', query: {id: article.id}})
      }
    },
    submitPassword() {
      this.$createHttp.checkPassword(this.id, this.password).then((res) => {
        if (res.code === 200 && res.data === true) {
          this.$router.push({path: '/article', query: {id: this.id}})
        } else {
          this.$message({
            message: "密码错误",
            type: "error"
          });
        }
      })
    }
  }
}
</script>
<style scoped>
.announcement {
  padding: 22px;
  border: 1px dashed var(--lightGray);
  color: var(--greyFont);
  border-radius: 10px;
  display: flex;
  margin: 40px auto 40px;
}

.announcement i {
  color: var(--themeBackground);
  font-size: 22px;
  margin: auto 0;
  animation: scale 0.8s ease-in-out infinite;
}

.announcement div div {
  margin-left: 20px;
  line-height: 30px;
}

.notice {
  cursor: pointer;
}

.notice:hover {
  text-decoration: underline;
}

.sort-article-first {
  margin: 40px auto 20px;
  display: flex;
  justify-content: space-between;
  color: var(--greyFont);
  border-bottom: 1px dashed var(--lightGray);
  padding-bottom: 5px;
}

.article-more {
  cursor: pointer;
  transition: all 0.3s;
}

.article-more:hover {
  color: var(--lightGreen);
  font-weight: 700;
  transform: scale(1.1);
}

.recent-post-container {
  display: flex;
  flex-wrap: wrap;
}

.recent-post-item {
  position: relative;
  user-select: none;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
  height: 350px;
  flex-shrink: 0;
  width: calc(100% / 3 - 20px);
  cursor: pointer;
  animation: zoomIn 0.8s ease-in-out;
}

.recent-post-item-image {
  width: 100%;
  height: 170px;
}

.recent-post-item-image >>> .el-image__inner {
  transition: all 1s;
}

.recent-post-item-image >>> .el-image__inner:hover {
  transform: scale(1.2);
}

.recent-post-item-post {
  width: 100%;
  height: 180px;
  padding: 10px 15px;
}

.recent-post-item-post h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;
}

.post-meta {
  font-size: 12px;
  color: var(--greyFont);
}

.recent-post-desc {
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sort-label {
  position: absolute;
  bottom: 10px;
}

.sort-label span {
  padding: 2px 4px;
  background-color: var(--maxLightGray);
  border-radius: 3px;
  font-size: 14px;
  color: var(--greyFont);
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
}

.sort-label span:hover {
  background-color: var(--themeBackground);
  color: var(--white);
}

.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 4px;
  color: var(--white);
}

.password-content {
  font-size: 13px;
  color: var(--maxGreyFont);
  line-height: 1.5;
}

@media screen and (max-width: 1400px) {
  .recent-post-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 600px) {
  .recent-post-item {
    width: calc(100% - 20px);
  }
}
</style>
